<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="css/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<script type="text/javascript" src="javascript/jquery.min.js"></script>
	<script type="text/javascript" src="javascript/jquery.easyui.min.js"></script>
</head>
<body>
	<div class="promptMain" style="border:1px solid red; height:730px; padding:10px 10px 0 10px;">
		<!-- prompts top three sections like first second fianl -->
		<div class="promptNav" style="border:1px solid green; height:40px;padding:5px 5px 0px 5px;font-weight:bold;">
			<div class="nav1" style="border:1px solid blue; width:33%; height:30px; display:inline-block;
				background:#6495ED;color:white;text-align:center; vertical-align:middle; line-height:30px;">first</div>
			<div class="nav2" style="border:1px solid blue; width:33%; height:30px; display:inline-block;
				background:#3A5FCD;color:white;text-align:center; vertical-align:middle; line-height:30px;">second</div>
			<div class="nav3" style="border:1px solid blue; width:33%; height:30px; display:inline-block;
				background:#3A5FCD;color:white;text-align:center; vertical-align:middle; line-height:30px;">final</div>
		</div>
		<!-- prompt nav like select basic filter -->
		<div class="basicFilters" style="border:1px solid red; height:30px;margin-top:10px;
			background:#436EEE;color:white;font-weight:bold;text-align:center; vertical-align:middle; line-height:30px;">
			Select Basic Filters
		</div>
		<div class="promptContent" style="border:1px solid red; height:550px;margin-top:10px;">
		<!-- hierarchy prompts -->
			<div class="hierPrompts" style="border:1px solid red;height:250px;margin:15px 10px 0px 10px;">
				<div id="tt" class="easyui-tabs" style="width:700px;height:250px">
					<div title="About" style="padding:10px">
						<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
						<ul>
							<li>easyui is a collection of user-interface plugin based on jQuery.</li>
							<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
							<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
							<li>complete framework for HTML5 web page.</li>
							<li>easyui save your time and scales while developing your products.</li>
							<li>easyui is very easy but powerful.</li>
						</ul>
					</div>
					<div title="My Documents" style="padding:10px">
						my documents
					</div>
				</div>
			</div>
			<!-- date prompts -->
			<div class="datePrompts" style="border:1px solid red;height:250px;margin:15px 10px 0px 10px;">
				<div id="tt" class="easyui-tabs" style="width:700px;height:250px">
					<div title="About" style="padding:10px">
						<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
						<ul>
							<li>easyui is a collection of user-interface plugin based on jQuery.</li>
							<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
							<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
							<li>complete framework for HTML5 web page.</li>
							<li>easyui save your time and scales while developing your products.</li>
							<li>easyui is very easy but powerful.</li>
						</ul>
					</div>
					<div title="My Documents" style="padding:10px">
						my documents
					</div>
				</div>
			</div>
		</div>
		<!-- prompt bottom buttons like previous next -->
		<div class="promptBnt" style="border:1px solid red; height:35px; margin-top:10px; font-weight:bold;">
			<div class="nextBtn" style="display:inline-block;float:right;width:80px;height:27px;
				border:1px solid blue;margin:2px 200px 0px 0px;border-radius:3px;background:#3A5FCD;
				color:white;text-align:center; vertical-align:middle; line-height:27px;">
				next
			</div>
			<div class="previousBtn" style="display:inline-block;height:27px;
				border-radius:3px;background:#3A5FCD;color:white;
				float:right;width:80px;border:1px solid blue;margin:2px 30px 0px 0px;
				text-align:center; vertical-align:middle; line-height:27px;">
				previous
			</div>
			
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			var tabs = $('#tt').tabs().tabs('tabs');
			for(var i=0; i<tabs.length; i++){
				tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
					$('#tt').tabs('select', e.data.index);
				});
			}
		});
	</script>
</body>
</html>